<template>
  <div>
      <el-row>
        <el-col :xl="5" :md="12" style="margin-bottom: 20px">
          <el-input
            @clear="clear"
            clearable
            type="text"
            v-model="input"
            placeholder="请输入内容"
            class="input-with-select"
          >
            <el-button
              slot="append"
              style="
                background-color: #3377ff;
                border-color: #8f9bb2;
                border-radius: 0;
                color: #fff;
                border: 1px solid #3377ff;
              "
              @click="submit"
              type="primary"
              >搜索</el-button
            >
            <i slot="prefix-icon" class="el-icon-search"></i>
          </el-input>
        </el-col>
        <el-table
          @row-click="rowClick"
          :header-cell-style="{ background: '#F3F8FE' }"
          :data="centerList"
          border
          style="width: 100%; margin: 20px 0"
        >
          <el-table-column label="标题" align="center" prop="title">
          </el-table-column>
          <el-table-column label="时间" align="center" prop="ctime">
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button
                class="cee"
                @click="
                  $router.push({
                    path: '/centerDetail',
                    query: { id: scope.row.id },
                  })
                "
                type="text"
                >查看</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- <el-col v-for="(item,index) in centerList" :key="index" class='mr' :lg="24" :xl="24">
          <el-col>
            <div @click.stop="goDetail(item.id)">
              <el-col :lg="1">
                <div class="news_inquiry">
                  <p class="contextSize">回复</p>
                  <p class="Headline">{{item.fnum}}</p>
                </div>
              </el-col>
              <el-col class="Mleft" :lg="15" :xl="15">
                <p class="context"><el-tag v-if="item.tag" effect="dark" size="small" style="margin-right:5px;" type="danger">{{item.tag}}</el-tag>{{item.title}}</p>
                <div class="tagr">
                  <el-tag style="margin-right: 20px;" v-for="tag in item.operate_key" :type="tag.type">{{tag.name}}</el-tag>
                </div>
                <div class="time_box">
                  <span class="time">{{item.ctime}}</span>
                  <span class="time">阅读量：{{item.click}}</span>
                </div>
              </el-col>
            </div>
          </el-col>
        </el-col> -->
        <!-- <el-col :xl="24">
          <div v-if="page.page" class="pagination">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page="page.page" :page-size="page.page_row" layout="total, prev, pager, next, jumper" :total="parseInt(page.count)"
              align='left'></el-pagination>
          </div>
        </el-col> -->
        <div class="pagination">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.page"
            :page-size="page.page_row"
            layout="total, prev, pager, next, jumper"
            :total="parseInt(page.count)"
            align="left"
          ></el-pagination>
        </div>
      </el-row>
  </div>
</template>

<script>
import { messageIndex } from "@/api";
export default {
  components: {
  },
  data() {
    return {
      centerList: [],
      page: [],
      input: "",
    };
  },

  mounted() {
    this.create();
  },
  methods: {
    rowClick(row) {
      // console.log(row);
      this.$router.push({
        path: "/centerDetail",
        query: {
          id: row.id,
        },
      });
    },
    async create() {
      try {
        const res = await messageIndex({
          keyword: this.input,
        });
        this.centerList = res.list;
        this.page = res.page;
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    add() {
      this.createHand = false;
    },
    //每页下拉显示数据
    async handleSizeChange(size) {
      try {
        const res = await messageIndex({
          page: size,
        });
        this.centerList = res.list;
        this.page = res.page;
        document.documentElement.scrollTop = 0;
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    //点击第几页
    async handleCurrentChange(currentPage) {
      try {
        const res = await messageIndex({
          page: currentPage,
        });
        this.centerList = res.list;
        this.page = res.page;
        document.documentElement.scrollTop = 0;
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    goDetail(id) {
      this.$router.push({
        path: "/centerDetail",
        query: {
          id: id,
        },
      });
    },
    submit() {
      if (this.input) {
        this.create();
      } else {
        this.$message.error("请输入关键词搜索");
      }
    },
    clear() {
      this.create();
    },
  },
};
</script>

<style scoped lang="less">
.mr {
  margin-bottom: 40px;
}
.mr:hover {
  background: #f4f5f7;
  cursor: pointer;
}
.obj {
  margin-top: 60px;
}

.news_inquiry {
  width: 80px;
  height: 110px;
  background: rgba(51, 191, 146, 1) !important;
  border-radius: 5px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  p {
    color: #fff;
    margin-bottom: 5px;
    background: rgba(51, 191, 146, 1) !important;
    word-break: break-all;
  }

  .time_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.context {
  padding-top: 5px;
}

.tagr {
  margin: 18px 0;
}

.Mleft {
  margin-left: 36px;
}

@media (max-width: 1360px) {
  .Mleft {
    margin-left: 50px;
  }
}

@media (max-width: 1280px) {
  .Mleft {
    margin-left: 80px;
  }
}
</style>
